<template>
	<view class="detail-container" v-if="isLoadEnd">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in detailData.imgArr" :key="item._id">
				<image @click="previewImage(item)" :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="context">
			<image :src="detailData.avatar" mode="aspectFill"></image>
			<view class="context-title">
				{{detailData.title}}
			</view>
		</view>
		<view class="address">
			<uni-icons type="location" size="40" color="#999"></uni-icons>
			{{detailData.address}}
		</view>
		<view class="content">
			<view class="introduce">
				<view class="title">
					客栈介绍
				</view>
				<text>{{detailData.introduce}}</text>
			</view>
			<view class="time">
				<view class="title">
					时间
				</view>
				<text>{{detailData.time[0] | formatDate}}</text>
				 ----
				<text>{{detailData.time[1] | formatDate}}</text>
			</view>
			<view class="time">
				<view class="title">
					招募人数
				</view>
				<text>{{detailData.number}}</text>
			</view>
			<view class="time">
				<view class="title">
					掌柜
				</view>
				<text>{{detailData.name}}</text>
			</view>
			<view class="time">
				<view class="title">
					联系电话
				</view>
				<text>{{detailData.phone}}</text>
			</view>
			<view class="work-content">
				<view class="title">
					工作内容
				</view>
				<text>
					{{detailData.content}}
				</text>
			</view>
			<view class="demand">
				<view class="title">
					要求
				</view>
				<text>
					{{detailData.demand}}
				</text>
			</view>
		</view>
		<view class="application" v-if="isQiye">
			<view class="flex">
				<view class="left" @click="seeEnrollForm">
					<text class="txt">查看报名表</text>
					<uni-icons type="checkmarkempty" color="#fff" size="32"></uni-icons>
				</view>
				<view class="right" @click="goSignForm">
					<text class="txt">查看打卡记录</text>
					<uni-icons type="checkmarkempty" color="#fff" size="32"></uni-icons>
				</view>
			</view>
		</view>
		<view class="application" @click="goApplication" v-else>
			<view class="flex" style="display: flex;align-items: center;justify-content: center;">
				<text class="txt">我要报名</text>
				<uni-icons type="checkmarkempty" color="#fff" size="32"></uni-icons>
			</view>
		</view>
		<!-- 垫片 -->
		<view style="height: 1px;"></view>
	</view>
</template>

<script>
	import {
		getDetail
	} from "../../ajax/api/home.js";
	export default {
		data() {
			return {
				isLoadEnd:false, //判断是否页面加载完成
				imgArr: [],
				detailData: {}, //详细信息
				isQiye:false, //判断是否是企业跳转过来的
			}
		},
		async onLoad() {
			const id = this.$Route.query.id;
			this.isQiye = this.$Route.query.isQiye;
			if(this.isQiye){
				// #ifdef MP-WEIXIN
				if (wx.hideHomeButton) {
					wx.hideHomeButton();
				}
				// #endif
			}
			const res = await getDetail(id);
			this.detailData = res;
			this.isLoadEnd = true;
		},
		filters: {
			// 时间戳格式化时间
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				return y + '-' + MM + '-' + d; //年月日
			}
		},

		methods: {
			// 图片预览
			previewImage(url){
				wx.previewImage({
				  current: url, // 当前显示图片的http链接
				  urls: this.detailData.imgArr // 需要预览的图片http链接列表
				})
			},
			// 进入报名页
			goApplication() {
				this.$Router.push({
					name: "application",
					params:{
						id:this.$Route.query.id
					}
				})
			},
			// 查看报名表
			seeEnrollForm(){
				this.$Router.push({
					path:"/pages/registrationForm/registrationForm",
					query:{
						id:this.$Route.query.id
					}
				})
			},
			// 查看打卡记录
			goSignForm(){
				this.$Router.push({
					path:"/pages/detail/seeSignIn/seeSignIn",
					query:{
						id:this.$Route.query.id
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./css/detail.scss";
</style>
